@import './mixins.scss';

$primary-color: #0BB78E;
$black-color: #444444;
$light-color: #ffffff;
$dark-gray: #777777;
$light-gray: #eeeeee;
$light-bg: #f4f4f4;

.flex-block {
  @include flex-base();
}

.flex-between {
	@include flex-base($jc:space-between, $ai:center);
}

.flex-xy-center {
  @include flex-base($jc:center, $ai:center);
}
.flex-col {
	flex-direction: column;
}

.ellipsis {
	@include ellipsis()
}

.txt-primary {
	color: #0BB78E;
}
.txt-info {
	color: #777777;
}
.txt-danger {
	color: red;
}

.trangle {
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	
	&-up {
		border-bottom: 8px solid #0BB78E;
	}
	
	&-down {
		border-top: 8px solid #999;
	}
}

.font-bold {
  font-weight: bold;
}

.btn{
	padding: 0 10px;
	background-color: $light-bg;
	text-align: center;
	color: $dark-gray;
	margin: 5px;
	box-sizing: border-box;

	&.plain {
		border: 1px solid $light-gray;
		text-align: center;
		color: $dark-gray;
		background-color: $light-color;
	}

	&.primary {
		background-color: $primary-color;
		text-align: center;
		color: $light-color;

		&.plain {
			border: 1px solid $primary-color;
			text-align: center;
			color: $primary-color;
			background-color: $light-color;
		}
	}

	&.danger {
		background-color: hsl(10, 80, 50);
		text-align: center;
		color: $light-color;

		&.plain {
			border: 1px solid hsl(10, 80, 50);
			text-align: center;
			color: hsl(10, 80, 50);
			background-color: $light-color;
		}
	}

	&.large {
		height: 40px;
		line-height: 40px;
		font-size: 16px;
	}
	&.normal {
		height: 32px;
		line-height: 32px;
		font-size: 14px;
	}
	&.small {
		height: 28px;
		line-height: 28px;
		font-size: 12px;
	}
	&.mini {
		height: 24px;
		line-height: 24px;
		font-size: 11px;
	}

	&.circle {
		border-radius: 3px;
	}
}

.txt {
	&-bold {
		font-weight: bold;
		color: $black-color;
	}
	&-info {
		color: $dark-gray;
	}
	&-large {
		font-size: 16px;
	}
	&-normal {
		font-size: 14px;
	}
	&-small {
		font-size: 12px;
	}
}

.m-10 {
	margin: 10px;

	&.m-t-0 {
		margin-top: 0px;
	}
	&.m-r-0 {
		margin-right: 0px;
	}
	&.m-b-0 {
		margin-bottom: 0px;
	}
	&.m-l-0 {
		margin-left: 0px;
	}
}
.m-0 {
	margin: 0px;
}
.m-t-10 {
	margin-top: 10px;
}
.m-r-10 {
	margin-right: 10px;
}
.m-b-10 {
	margin-bottom: 10px;
}
.m-l-10 {
	margin-left: 10px;
}

.p-10 {
	padding: 10px;

	&.p-t-0 {
		padding-top: 0px;
	}
	&.p-r-0 {
		padding-right: 0px;
	}
	&.p-b-0 {
		padding-bottom: 0px;
	}
	&.p-l-0 {
		padding-left: 0px;
	}
}
.p-0 {
	padding: 0px;
}
.p-t-10 {
	padding-top: 10px;
}
.p-r-10 {
	padding-right: 10px;
}
.p-b-10 {
	padding-bottom: 10px;
}
.p-l-10 {
	padding-left: 10px;
}

.collapse-wrapper {
	.u-collapse-item {
		margin: 10px;
		margin-bottom: 0px;
		background: #ffffff;
	}
}